<template>
    <div class="visualSssf_right">
        <div class="visualSssf_right_box" id="main5"></div>
        <div class="visualSssf_right_box" id="main6"></div>
        <div class="visualSssf_right_box" id="main7"></div>
    </div>
</template>

<script>
    export default {
        name: "Main567",
        data(){
            return{
                option:{
                    title: {
                        //text: `${value}万辆`,
                        text: `车辆总数`,
                        subtext: '',
                        left: 'center',
                        top: 'center',//top待调整
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                            fontFamily: 'PingFangSC-Regular'
                        },
                        subtextStyle: {
                            color: '#ff',
                            fontSize: 14,
                            fontFamily: 'PingFangSC-Regular',
                            top: 'center'
                        },
                        itemGap: -1//主副标题间距
                    },

                    series: [{
                        name: 'pie1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['65%', '70%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: 80,
                            name: 'completed',
                            itemStyle: {
                                normal: {
                                    borderWidth: 8,
                                    borderColor: {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#1d54f7' || '#00cefc' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#68eaf9' || '#367bec' // 100% 处的颜色
                                        }]
                                    },
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#1d54f7' || '#00cefc' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#68eaf9' || '#367bec' // 100% 处的颜色
                                        }]
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: 'gap',
                            value: 20,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: 'rgba(0, 0, 0, 0)',
                                    borderColor: 'rgba(0, 0, 0, 0)',
                                    borderWidth: 0
                                }
                            }
                        }]
                    }]
                }
            }
        },
        mounted() {
            this.drawLine()
        },
        methods:{
            drawLine(){
                let main5 = this.$echarts.init(document.getElementById('main5'))
                let main6 = this.$echarts.init(document.getElementById('main6'))
                let main7 = this.$echarts.init(document.getElementById('main7'))
                main5.setOption(this.$data.option)
                main6.setOption(this.$data.option)
                main7.setOption(this.$data.option)
            }
        }
    }
</script>

<style scoped>

</style>